/**
 * create by young (young2f@outlook.com) on 2020/10/30
 */


'use strict';
import React from 'react';
import { connect } from 'dva/index';
import { Button, Form, Popconfirm, Switch, Table } from 'antd';

import styles from '../index.less';
import { ModalView } from 'antd-extra';
import ViewTitle from '../../components/ViewTitle';
import ProductionElement from '../../components/ProductionElement';
import ModalCreateRole from './modals/ModalCreateRole';
import ComponentBase from '../../components/Base/ComponentBase';
import ModalConfirm from '../../components/DirTree/modal/ModalConfirm';

const _ = require('lodash');
const moment = require('moment');

@Form.create()
@connect(({ global, role, user }) => ({ ...global, ...role, ...user }))
export default class Role extends ComponentBase {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    this.props.dispatch({
      type: 'role/findRoles',
      payload: { tenantCode: this.getTenantCode() },
    });
  }

  detail = (role) => {
    ModalView.open(ModalCreateRole,
      { title: '编辑角色', width: '720px' },
      {
        role,
        dispatch: this.props.dispatch,
        result: data => {
          this.props.dispatch(
            { type: 'role/updateRole', payload: data },
          ).then(res => {

            this.requestReturn(res);
            this.componentDidMount();
          });
        },
      },
    );
  };
  delete = async (record) => {
    const { roleCode } = record;
    const res = await this.props.dispatch({
      type: 'role/deleteRole',
      payload: { roleCode },
    });

    const { status, message } = res;
    if (status === 'ok') {
      this.requestReturn(res);
      this.componentDidMount();
      return;
    }

    ModalView.open(ModalConfirm, { title: '确认', width: 720 },
      {
        message, title: '确认删除角色？',
        result: async value => {

          if (value) {
            const res = await this.props.dispatch({
              type: 'role/deleteRole',
              payload: { roleCode, force: true },
            });
            this.requestReturn(res);
            this.componentDidMount();
          }
        },
      });

  };
  create = () => {
    ModalView.open(ModalCreateRole,
      { title: '添加角色', width: '720px' },
      {
        dispatch: this.props.dispatch,
        result: data => {
          data.isAdmin = false;
          data.table = 'role';
          this.props.dispatch({
            type: 'role/createRole',
            payload: data,
          }).then(res => {
            this.requestReturn(res);
            this.componentDidMount();
          });
        },
      },
    );
  };

  columns = () => {
    const temp = [
      {
        title: '角色', dataIndex: 'user',
        render: (value, record) => {
          const { roleCode, roleName } = record;
          return (
            <ProductionElement code={roleCode} name={roleName}></ProductionElement>
          );
        },
      },
      {
        title: '租户', dataIndex: 'tenantName',key: 'tenantName', width: 250,
      },
      {
        title: '管理员', dataIndex: 'isAdmin',key: 'isAdmin', width: 100, render: value => {
          return (<Switch checkedChildren="是" unCheckedChildren="否" checked={value}></Switch>);
        },
      },
      {
        title: '创建者', dataIndex: 'createUser', key: 'createUser',width: 150,
      },
      {
        title: '创建时间', dataIndex: 'createdTs',key: 'createdTs', width: 200, render: value => {
          return (<div>{moment(value).format('YYYY-MM-DD HH:mm:ss')}</div>);
        },
      },

      {
        title: '操作', dataIndex: 'opt', key: 'opt', width: 120,
        render: (value, record) => {
          const { isAdmin } = record;
          return (
            <span>
              {<a style={{ marginRight: '6px' }} onClick={() => this.detail(record)}>详情</a>}
              {!isAdmin && <Popconfirm
                title="确认删除"
                onConfirm={this.delete.bind(this, record)}
                okText="是"
                cancelText="否"
              >
                <a>删除</a>
              </Popconfirm>
              }
            </span>
          );
        },
      },
    ];
    return temp;
  };

  render() {
    const { roles } = this.props;
    return (<Form className={styles.content}>
      <ViewTitle
        title={'角色列表'}
        actions={[
          <Button type={'primary'} onClick={this.create.bind(this)}>添加</Button>,
        ]}
      >
      </ViewTitle>
      <Table
        className={styles.antTable}
        bordered={true}
        columns={this.columns()}
        dataSource={roles}
        // scroll={{ x: true }}
        pagination={true}
      >
      </Table>
    </Form>);
  }
}
